<template>
  <s-layout title="实践活动" navbar="normal" :bgStyles="{ color: '#f5f5f5' }">
    <!-- Tab Bar -->
    <su-sticky bgColor="#f5f5f5">
      <view class="tab-bar">
        <view
          v-for="(tab, index) in state.tabs"
          :key="index"
          :class="['tab-item', { active: state.activeTab === index }]"
          @tap="handleTabChange(index)"
        >
          {{ tab }}
        </view>
      </view>
    </su-sticky>

    <!-- Filter Bar -->
    <view class="filter-bar">
      <view class="filter-title">🏷️ 活动分类</view>
      <view class="filter-tags">
        <view
          v-for="(tag, idx) in state.filterTags"
          :key="idx"
          :class="['filter-tag', { active: state.activeFilter === idx }]"
          @tap="state.activeFilter = idx"
        >
          {{ tag }}
        </view>
      </view>
    </view>

    <!-- Activity List -->
    <view class="activity-list">
      <view
        v-for="activity in filteredActivities"
        :key="activity.id"
        class="activity-card"
        @tap="handleActivityClick(activity)"
      >
        <view class="activity-banner">
          <image
            v-if="activity.image"
            :src="activity.image"
            mode="aspectFill"
            class="activity-banner-image"
          />
          <view class="activity-banner-icon">{{ activity.icon }}</view>
          <view :class="['activity-status', `status-${activity.status}`]">
            {{ activity.statusText }}
          </view>
        </view>

        <view class="activity-content">
          <view class="activity-header">
            <text class="activity-title">{{ activity.title }}</text>
            <view class="activity-category">{{ activity.category }}</view>
          </view>

          <view class="activity-details">
            <view class="detail-item">
              <text class="detail-icon">⏰</text>
              <text>{{ activity.time }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-icon">📍</text>
              <text>{{ activity.location }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-icon">👥</text>
              <text>{{ activity.peopleText }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-icon">💰</text>
              <text>{{ activity.pointsText }}</text>
            </view>
          </view>

          <text class="activity-description">{{ activity.description }}</text>

          <view class="activity-progress">
            <view class="progress-header">
              <text class="progress-text">{{ activity.progressLabel }}</text>
              <text class="progress-ratio">{{ activity.progressRatio }}</text>
            </view>
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: activity.progressPercent + '%' }"></view>
            </view>
          </view>

          <view class="activity-actions">
            <button class="btn btn-secondary" @tap.stop="handleShare(activity)">分享</button>
            <button
              :class="['btn', activity.actionDisabled ? 'btn-disabled' : 'btn-primary']"
              @tap.stop="handleAction(activity)"
            >
              {{ activity.actionText }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- Quick Join Button -->
    <view class="quick-join" @tap="handleQuickJoin">⚡</view>
  </s-layout>
</template>

<script setup>
import { reactive, computed } from 'vue'
import sheep from '@/sheep'

const state = reactive({
  activeTab: 0,
  tabs: ['全部活动', '我的活动', '历史记录'],
  activeFilter: 0,
  filterTags: ['全部', '文化活动', '教育培训', '健康义诊', '环保行动', '体育健身', '科普宣传'],
  activityList: [
    {
      id: 10,
      title: '活动预告！北海市贝雕博物馆开放日来了，每月限量开放→速约!（第一期）',
      icon: '🏛️',
      image: '/static/img/贝雕博物馆.jpg',
      status: 'upcoming',
      statusText: '活动预告',
      category: '文化活动',
      time: '2025-11-15 09:00 - 17:00',
      location: '北海市贝雕博物馆',
      peopleText: '限额参观 50 人',
      pointsText: '获得积分：+30 分',
      description:
        '北海市贝雕博物馆每月限量开放参观活动，深入了解贝雕艺术的历史文化，欣赏精美的贝雕作品，感受传统工艺的魅力。名额有限，先到先得！',
      progressLabel: '👥 预约进度',
      progressRatio: '20/50',
      progressPercent: 40,
      actionText: '立即预约',
      actionDisabled: false
    },
    {
      id: 11,
      title:
        '【站站融通•文明365】石榴结籽粽连心，邻里融乐一家亲——2025年平安街社区民族团结主题活动',
      icon: '🫂',
      image: '/static/img/石榴结籽.jpg',
      status: 'upcoming',
      statusText: '民族团结',
      category: '文化活动',
      time: '2025-11-10 14:00 - 17:00',
      location: '平安街社区新时代文明实践站',
      peopleText: '招募参与者 80 人',
      pointsText: '获得积分：+40 分',
      description:
        '以"石榴结籽粽连心"为主题的民族团结活动，通过包粽子、民族文化展示、邻里交流等形式，促进各民族居民之间的了解和友谊，共建和谐社区。',
      progressLabel: '👥 报名进度',
      progressRatio: '35/80',
      progressPercent: 44,
      actionText: '报名参与',
      actionDisabled: false
    },
    {
      id: 12,
      title: '西藏路社区开展"知老・护老・敬老"老龄化教育暨中医惠老活动',
      icon: '👵',
      image: '/static/img/老龄化教育.jpg',
      status: 'upcoming',
      statusText: '敬老服务',
      category: '健康义诊',
      time: '2025-11-08 09:00 - 12:00',
      location: '西藏路社区新时代文明实践站',
      peopleText: '招募志愿者 25 人',
      pointsText: '获得积分：+60 分',
      description:
        '开展老龄化健康教育和中医养生服务，为社区老年人提供健康咨询、中医理疗、养生指导等服务，提高老年人的健康意识和生活质量。',
      progressLabel: '👥 报名进度',
      progressRatio: '18/25',
      progressPercent: 72,
      actionText: '了解详情',
      actionDisabled: false
    },
    {
      id: 1,
      title: '社区环保清洁行动',
      icon: '🌱',
      image: '',
      status: 'ongoing',
      statusText: '进行中',
      category: '环保行动',
      time: '今天 14:00 - 17:00',
      location: '文明实践中心',
      peopleText: '招募志愿者 30 人',
      pointsText: '获得积分：+50 分',
      description:
        '为建设美丽社区，共同营造良好的生活环境，诚邀广大志愿者参与社区环保清洁行动。活动包括街道清扫、垃圾分类宣传、绿植养护等内容。',
      progressLabel: '👥 报名进度',
      progressRatio: '15/30',
      progressPercent: 50,
      actionText: '立即报名',
      actionDisabled: false
    },
    {
      id: 2,
      title: '敬老院慰问活动',
      icon: '👴',
      image: '',
      status: 'upcoming',
      statusText: '即将开始',
      category: '文化活动',
      time: '明天 09:00 - 12:00',
      location: '阳光敬老院',
      peopleText: '招募志愿者 20 人',
      pointsText: '获得积分：+80 分',
      description:
        '关爱老年人，传递温暖情怀。我们将为敬老院的老人们送去关怀和陪伴，包括健康体检、文艺表演、聊天陪伴等温馨活动。',
      progressLabel: '👥 报名进度',
      progressRatio: '8/20',
      progressPercent: 40,
      actionText: '立即报名',
      actionDisabled: false
    },
    {
      id: 3,
      title: '社区免费义诊活动',
      icon: '🏥',
      image: '',
      status: 'upcoming',
      statusText: '即将开始',
      category: '健康义诊',
      time: '本周六 08:00 - 16:00',
      location: '社区文化广场',
      peopleText: '招募志愿者 15 人',
      pointsText: '获得积分：+60 分',
      description:
        '邀请专业医护团队为社区居民提供免费健康体检、健康咨询、慢性病筛查等服务，普及健康知识，关爱社区居民身体健康。',
      progressLabel: '👥 报名进度',
      progressRatio: '12/15',
      progressPercent: 80,
      actionText: '立即报名',
      actionDisabled: false
    },
    {
      id: 4,
      title: '儿童阅读推广活动',
      icon: '📚',
      image: '',
      status: 'finished',
      statusText: '已结束',
      category: '教育培训',
      time: '上周六 14:00 - 17:00',
      location: '社区图书馆',
      peopleText: '已完成 25 人参与',
      pointsText: '活动评分：4.8/5.0',
      description:
        '通过故事分享、亲子阅读、读书沙龙等形式，培养儿童阅读兴趣，提高阅读能力，营造良好的家庭阅读氛围。',
      progressLabel: '✅ 活动已完成',
      progressRatio: '25/25',
      progressPercent: 100,
      actionText: '活动已结束',
      actionDisabled: true
    }
  ]
})

const filteredActivities = computed(() => {
  let result = state.activityList

  // Filter by tab
  if (state.activeTab === 1) {
    // 我的活动
    result = result.filter((a) => a.status === 'ongoing' || a.status === 'upcoming')
  } else if (state.activeTab === 2) {
    // 历史记录
    result = result.filter((a) => a.status === 'finished')
  }

  // Filter by category
  if (state.activeFilter > 0) {
    const category = state.filterTags[state.activeFilter]
    result = result.filter((a) => a.category === category)
  }

  return result
})

const handleTabChange = (index) => {
  state.activeTab = index
}

const handleActivityClick = (activity) => {
  uni.navigateTo({
    url: `/pages/cmt/activity-detail?id=${activity.id}`
  })
}

const handleShare = (activity) => {
  uni.showToast({
    title: '分享功能开发中',
    icon: 'none'
  })
}

const handleAction = (activity) => {
  if (activity.actionDisabled) {
    return
  }
  uni.showModal({
    title: '确认报名',
    content: `确定要报名参加"${activity.title}"吗？\n\n报名成功后请按时参加活动，无故缺席将影响信用积分。`,
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '报名成功',
          icon: 'success'
        })
      }
    }
  })
}

const handleQuickJoin = () => {
  uni.showToast({
    title: '快速报名功能开发中',
    icon: 'none'
  })
}
</script>

<style lang="scss" scoped>
.tab-bar {
  background: white;
  margin: 30rpx 30rpx 0;
  border-radius: 32rpx;
  padding: 10rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 10rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 24rpx;
    font-size: 28rpx;
    color: #666;
    transition: all 0.3s;

    &.active {
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      color: white;
      font-weight: bold;
    }
  }
}

.filter-bar {
  background: white;
  margin: 30rpx;
  border-radius: 32rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);

  .filter-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #333;
  }

  .filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .filter-tag {
      padding: 12rpx 24rpx;
      border-radius: 30rpx;
      background: #f0f2f5;
      font-size: 24rpx;
      color: #666;
      transition: all 0.3s;

      &.active {
        background: linear-gradient(135deg, #ff6b00, #ffa726);
        color: white;
      }
    }
  }
}

.activity-list {
  margin: 0 30rpx 30rpx;

  .activity-card {
    background: white;
    border-radius: 32rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s;

    .activity-banner {
      height: 360rpx;
      background: linear-gradient(135deg, #ff6b00, #ffa726);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      .activity-banner-image {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }

      .activity-banner-icon {
        position: relative;
        z-index: 2;
        font-size: 96rpx;
        color: white;
        text-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.7);
      }

      .activity-status {
        position: absolute;
        top: 30rpx;
        right: 30rpx;
        padding: 10rpx 20rpx;
        border-radius: 24rpx;
        font-size: 22rpx;
        font-weight: bold;
        z-index: 3;

        &.status-upcoming {
          background: rgba(255, 193, 7, 0.9);
          color: #856404;
        }

        &.status-ongoing {
          background: rgba(40, 167, 69, 0.9);
          color: white;
        }

        &.status-finished {
          background: rgba(108, 117, 125, 0.9);
          color: white;
        }
      }
    }

    .activity-content {
      padding: 40rpx;

      .activity-header {
        margin-bottom: 30rpx;

        .activity-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 16rpx;
          line-height: 1.4;
          display: block;
        }

        .activity-category {
          background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 167, 38, 0.1));
          color: #ff6b00;
          padding: 4rpx 16rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
          display: inline-block;
        }
      }

      .activity-details {
        margin-bottom: 30rpx;

        .detail-item {
          display: flex;
          align-items: center;
          gap: 16rpx;
          margin-bottom: 16rpx;
          font-size: 26rpx;
          color: #666;

          .detail-icon {
            font-size: 28rpx;
            width: 32rpx;
          }
        }
      }

      .activity-description {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 30rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .activity-progress {
        margin-bottom: 30rpx;

        .progress-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .progress-text {
            font-size: 24rpx;
            color: #666;
          }

          .progress-ratio {
            font-size: 24rpx;
            color: #ff6b00;
            font-weight: bold;
          }
        }

        .progress-bar {
          height: 12rpx;
          background: #f0f2f5;
          border-radius: 6rpx;
          overflow: hidden;

          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff6b00, #ffa726);
            border-radius: 6rpx;
            transition: width 0.3s;
          }
        }
      }

      .activity-actions {
        display: flex;
        gap: 20rpx;

        .btn {
          padding: 16rpx 32rpx;
          border-radius: 40rpx;
          border: none;
          font-size: 26rpx;
          transition: all 0.3s;
          flex: 1;
          text-align: center;
          line-height: 1;

          &::after {
            border: none;
          }

          &.btn-primary {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
          }

          &.btn-secondary {
            background: #f0f2f5;
            color: #ff6b00;
          }

          &.btn-disabled {
            background: #f0f2f5;
            color: #999;
          }
        }
      }
    }
  }
}

.quick-join {
  position: fixed;
  bottom: 140rpx;
  right: 40rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #ff6b00, #ffa726);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40rpx;
  box-shadow: 0 8rpx 40rpx rgba(255, 107, 0, 0.4);
  z-index: 100;
}
</style>
